<template>
	<view class="page-content-box">
		<view class="form-box">
			<view class="form-item">
				<view class="label">楼宇</view>
				<picker mode="selector" :range="buildingList" @change="onBuildingChange">
					<view class="input picker-input">
						<text :class="buildingName?'':'placeholder'">{{buildingName || '请选择楼宇'}}</text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<view class="label">位置</view>
				<input class="input" v-model="place" placeholder="请输入位置" />
			</view>

			<view class="form-item">
				<view class="label">简要描述</view>
				<textarea class="textarea" v-model="remark" placeholder="请输入简要描述" :maxlength="200" />
			</view>

			<view class="form-item">
				<view class="label">图片</view>
				<view class="upload-box">
					<view class="image-item" v-for="(img,idx) in imgList" :key="idx">
						<image :src="img" mode="aspectFill"></image>
						<view class="del-btn" @tap="delImg(idx)">
							<text>×</text>
						</view>
					</view>
					<view class="upload-btn" v-if="imgList.length<9" @tap="chooseImage">
						<text>+</text>
					</view>
				</view>
			</view>
		</view>

		<view class="submit-box">
			<button class="submit-btn" @click="submit">提交</button>
		</view>
		<!-- 是否进行登录的弹窗 -->
		<view class="dialog-center-bg" v-if="!hasLogin" @click="hasLogin=true"></view>
		<view class="dialog-center-content" v-if="!hasLogin">
			<view class="dialog-center-title">你还没登录,请先登录</view>

			<view class="btn-box">
				<button class="dlg-btn close-btn" type="primary" @click="hasLogin=true">取消</button>
				<button class="dlg-btn submit-btn" type="primary" style="background-color:#129de8 ;" @click="goToLogin">去登录</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			buildingName: '',
			buildingList: ['分公司大楼', '档案楼', '信安楼', '设计楼', '西部主楼', '西部副楼', '北部湾楼', '电视台', '广发楼', '研究院', '信科大楼'],
			place: '',
			remark: '',
			imgList: [],
			imgIds: [],
			hasLogin: false
		}
	},
	onLoad() {
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#70dbff'
		})
	},
	onShow() {
		var _this = this;
		if(uni.getStorageSync("token")&&uni.getStorageSync("userInfo")) {
			_this.hasLogin = true;
		}else{
			_this.hasLogin = false;
		}
	},
	methods: {
		onBuildingChange(e) {
			this.buildingName = this.buildingList[e.detail.value];
		},
		//去登录
		goToLogin(){
			if(!(uni.getStorageSync("token"))) {
				uni.navigateTo({
				    url: "/pages/hrlogin/hrlogin"
				});
				return;
			}
		},
		chooseImage() {
			var _this = this;
			uni.chooseImage({
				count: 9 - this.imgList.length,
				sizeType: ['compressed'],
				sourceType: ['album','camera'],
				success: function (res) {
					res.tempFilePaths.forEach(filePath => {
						if(res.tempFiles[0].size > 10 * 1024 * 1000){
							_this.$util.showToast({title:"照片大小不能超过10MB"});
							return
						}
						uni.uploadFile({
							url: _this.$client.API_URL+'/api/sys/file/upload',
							filePath: filePath,
							name: 'file',
							header:{token:uni.getStorageSync("token")},
							success: (uploadRes) => {
								var data = JSON.parse(uploadRes.data)
								if(data.code == 200){
									_this.imgList.push(_this.$client.API_URL + '/api/sys/file/download?attachId=' + data.data.icode);
									_this.imgIds.push(data.data.icode);
								}
							}
						});
					});
				}
			});
		},
		delImg(idx) {
			this.imgList.splice(idx, 1);
			this.imgIds.splice(idx, 1);
		},
		submit() {
			var _this = this;
			if(!this.buildingName){
				this.$util.showToast({title:'请选择楼宇'});
				return;
			}
			if(!this.place){
				this.$util.showToast({title:'请输入位置'});
				return;
			}
			if(!this.remark){
				this.$util.showToast({title:'请输入简要描述'});
				return;
			}
			if(this.imgIds.length == 0){
				this.$util.showToast({title:'请上传图片'});
				return;
			}

			uni.showLoading({title: '提交中...'});
			var params = {
				buildingName: this.buildingName,
				place: this.place,
				remark: this.remark,
				imgIds: this.imgIds.join(',')
			}
			this.$client.post('/api/biz/property/maintenance/save', params, function(res,message){
				uni.hideLoading();
				_this.$util.showToast({title:message});
				setTimeout(function(){
					uni.navigateBack({delta: 1})
				},1000);
			},function(res){
				uni.hideLoading();
				if(res){
					_this.$util.showToast({title:res});
				}
			},true);
		}
	}
}
</script>

<style>
.page-content-box{
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 20rpx;
	box-sizing: border-box;
}
.form-box{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
}
.form-item{
	margin-bottom: 30rpx;
}
.label{
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}
.input{
	width: 100%;
	height: 80rpx;
	background: #f8f8f8;
	border-radius: 10rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}
.textarea{
	width: 100%;
	min-height: 200rpx;
	background: #f8f8f8;
	border-radius: 10rpx;
	padding: 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}
.picker-input{
	display: flex;
	align-items: center;
}
.picker-input .placeholder{
	color: #999;
}
.upload-box{
	display: flex;
	flex-wrap: wrap;
}
.image-item{
	width: 160rpx;
	height: 160rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	position: relative;
}
.image-item image{
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.del-btn{
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 40rpx;
	height: 40rpx;
	background: #ff0000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.del-btn text{
	color: #fff;
	font-size: 32rpx;
	line-height: 1;
}
.upload-btn{
	width: 160rpx;
	height: 160rpx;
	background: #f8f8f8;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2rpx dashed #ddd;
}
.upload-btn text{
	font-size: 80rpx;
	color: #999;
	line-height: 1;
}
.submit-box{
	margin-top: 40rpx;
}
.submit-btn{
	width: 100%;
	height: 88rpx;
	background: #70dbff;
	border-radius: 10rpx;
	color: #fff;
	font-size: 32rpx;
	line-height: 88rpx;
	text-align: center;
}
</style>
